<form
    name="donationForm"
    class="pm_form donationForm-container"
    ng-class="{
        'donationForm-method-card': model.method.value === 'use.card',
        'donationForm-method-payal': model.method.value === 'paypal',
        'donationForm-method-newcard': model.method.value === 'card',
        'donationForm-method-cash': model.method.value === 'cash'
    }"
    data-form-is-invalid
    novalidate>

    <p class="alert alert-info donationForm-info" translate-context="Info" translate>Donations are added as credit to your ProtonMail account and can be used to purchase account upgrades.</p>

    <label for="otherAmount" translate translate-context="Title">Amount</label>
    <div class="pm_grid flex flex-mobileShrink donateModal-choose-amount">
        <div class="col-1-4">
            <button
                type="button"
                class="pm_button fullwidth donationForm-btn-amount"
                ng-class="{ success: model.amount === 5 }"
                data-amount="5">5</button>
        </div>
        <div class="col-1-4">
            <button
                type="button"
                class="pm_button fullwidth donationForm-btn-amount"
                ng-class="{ success: model.amount === 10 }"
                data-amount="10">10</button>
        </div>
        <div class="col-1-4">
            <button
                type="button"
                class="pm_button fullwidth donationForm-btn-amount"
                ng-class="{ success: model.amount === 25 }"
                data-amount="25">25</button>
        </div>
        <div class="col-1-4">
            <button
                type="button"
                class="pm_button fullwidth donationForm-btn-amount"
                ng-class="{ success: model.amount === 50 }"
                data-amount="50">50</button>
        </div>
    </div>
    <div class="pm_grid flex flex-mobileShrink donationForm-amount-row-2 donateModal-choose-amount">
        <div class="col-1-4">
            <button
                type="button"
                class="pm_button fullwidth donationForm-btn-amount"
                ng-class="{ success: model.amount === 100 }"
                data-amount="100">100</button>

        </div>

        <div class="col-1-4">
            <button
                type="button"
                class="pm_button fullwidth donationForm-btn-amount"
                ng-class="{ success: model.amount === 250 }"
                data-amount="250">250</button>
        </div>
        <div class="col-1-4 donateModal-choose-otheramount">
            <input
                type="number"
                min="2"
                max="999999"
                id="otherAmount"
                name="otherAmount"
                ng-model="model.otherAmount"
                ng-focus="onFocusOtherAmount()"
                placeholder-translate-context="Other amount to donate"
                placeholder-translate="Other">
        </div>

        <div class="col-1-4 donateModal-choose-currency">
            <div class="pm_select">
                <select
                    class="donateModal-select-currency"
                    ng-model="model.currency"
                    ng-options="currency.label for currency in currencies"></select>
                <i class="fa fa-angle-down"></i>
            </div>
        </div>
    </div>

    <div class="donateModal-choose-errors" ng-messages="donationForm.otherAmount.$error">
        <p ng-message="number" class="text-red" translate-context="Error" translate>Invalid number</p>
        <p ng-message="min" class="text-red" translate-context="Error" translate>Due to credit card processing fees, we cannot accept donations smaller than 2.</p>
        <p ng-message="max" class="text-red" translate-context="Error" translate>Thank you for your willingness to donate. The maximum we can accept in single donations is 999 999 at this moment. Thank you</p>
    </div>

    <div class="donationForm-paymentMethod">
        <label for="paymentMethod" translate-context="Title" translate>Select payment method:</label>
        <div class="pm_select">
            <select
                id="paymentMethod"
                ng-model="model.method"
                ng-options="method.label for method in methods"></select>
            <i class="fa fa-angle-down"></i>
        </div>
    </div>
    <p
        ng-if="model.method.value === 'cash'"
        class="donationForm-about-cash alert alert-info"
        translate-context="Info"
        translate>To pay via Cash, please email us at <strong>contact@protonmail.com</strong> for instructions.</p>

    <card-view
        ng-if="model.method.value === 'card'"
        class="donationForm-cardView"
        data-card="model.card"
        data-form="donationForm"></card-view>

    <paypal-view
        ng-if="model.method.value === 'paypal' && !donationForm.otherAmount.$error.max"
        data-type="{{::type}}"
        data-amount="getAmount()"
        data-currency="model.currency.value"
        data-callback="paypalCallback"></paypal-view>

    <bitcoin-view
        ng-if="model.method.value === 'bitcoin'"
        class="donateModal-bitcoin"
        data-type="{{::type}}"
        data-currency="model.currency.value"
        data-amount="getAmount()"></bitcoin-view>

    <footer class="text-center spacing-top donationForm-footer">
        <button
            class="pm_button primary large donationForm-btn-submit disabled-if-network-activity"
            translate
            translate-context="Action">complete setup</button>
    </footer>
</form>
